* {
  margin: 0;
  padding: 0;
}

.left {
  width: 300px;
  height: 100px;
  background-color: #823384;
  text-align: center;
  font-size: 20px;
  color: #fdf6e3;
}
.center {
  height: 100px;
  text-align: center;
  background-color: #d29922;
}
.right {
  width: 300px;
  height: 100px;
  background-color: #0c8ac5;
  text-align: center;
  font-size: 20px;
  color: #fff;
}

.float-layout,
.position-layout,
.flex-layout,
.table-layout,
.gird-layout {
  height: 100px;
}
p {
  margin-top: 20px;
}
.float-layout .left {
  float: left;
}
.float-layout .right {
  float: right;
}

.position-layout div {
  position: absolute;
}
.position-layout .left {
  left: 0;
}
.position-layout .center {
  left: 300px;
  right: 300px;
}
.position-layout .right {
  right: 0;
}

.flex-layout {
  display: flex;
}
.flex-layout .center {
  flex: 1;
}

.table-layout {
  width: 100%;
  display: table;
}
.table-layout div {
  display: table-cell;
}

.gird-layout {
  display: grid;
  width: 100%;
  grid-template-rows: 100px;
  grid-template-columns: 300px auto 300px;
}
